window.onload = function() {
    // 获取左侧列表项,对应的所有div
    var lis = document.querySelectorAll('.nav-item');
    var divs = document.querySelectorAll('.right div');
    
    // 给每个列表项绑定单击事件
    for(let i = 0 ; i < lis.length ; i++){
        lis[i].onclick = function(){
            var index  = i;
            // 事件中，先把所有div隐藏，再把对应的div显示
            for(var j = 0 ; j < lis.length ;j++){
                divs[j].style.display = 'none';
            }
            divs[index].style.display = 'block';
        }
    }

    // 获取所有的输入框和按钮
    const inputs = document.querySelectorAll('.right form input[type="text"], .right form input[type="password"], .right form input[type="tel"], .right form input[type="email"]');
    const buttons = document.querySelectorAll('.right form input[type="button"]');

    // 初始化输入框为隐藏状态
    inputs.forEach(input => {
        input.style.display = 'none';
    });

    // 给每个按钮绑定单击事件
    buttons.forEach(button => {
        button.addEventListener('click', function (event) {
            // 阻止表单默认提交行为
            event.preventDefault();

            // 获取对应的输入框
            const input = this.previousElementSibling;
            // 获取对应的显示文本元素
            const displayText = this.nextElementSibling;

            // 获取对应的表格显示元素
            let tableDisplayText;
            switch (input.id) {
                case 'userName':
                    tableDisplayText = document.getElementById('tableDisplayName');
                    break;
                case 'userSex':
                    tableDisplayText = document.getElementById('tableDisplaySex'); // 如果有性别显示元素，可以添加
                    break;
                case 'idcard':
                    tableDisplayText = document.getElementById('tableDisplayIdcard');
                    break;
                case 'phone':
                    tableDisplayText = document.getElementById('tableDisplayPhone');
                    break;
                case 'userEmail':
                    tableDisplayText = document.getElementById('tableDisplayEmail');
                    break;
            }

            // 切换输入框的显示状态
            if (input.style.display === 'none' || input.style.display === '') {
                input.style.display = 'inline-block';
                this.value = '保存'; // 改变按钮文本为“保存”
            } else {
                input.style.display = 'none';
                this.value = '修改'; // 改变按钮文本为“修改”
                // 保存输入的信息到显示文本元素
                displayText.textContent = input.value;
                if (tableDisplayText) {
                    tableDisplayText.textContent = input.value;
                }
            }
        });
    });

    var links = document.getElementsByClassName('nav-link'); // 获取所有的标签对象
    // 循环遍历每一个链接
    for (var i = 0; i < links.length; i++) {
        // 绑定鼠标悬停事件
        links[i].onmouseover = function () {
            this.style.backgroundColor = '#eee'; // this表示事件源对象
        };
        links[i].onmouseout = function () {
            this.style.backgroundColor = ''; // 恢复默认背景颜色
        };

        // 绑定点击事件
        links[i].onclick = function () {
            // 移除所有链接的激活样式
            for (var j = 0; j < links.length; j++) {
                links[j].classList.remove('active');
            }
            // 添加当前链接的激活样式
            this.classList.add('active');
        };
    }

    // 获取所有的删除按钮
    const deleteButtons = document.querySelectorAll('.delete-btn');

    // 为每个删除按钮添加点击事件监听器
    deleteButtons.forEach(button => {
        button.addEventListener('click', function (event) {
            // 阻止默认行为
            event.preventDefault();

            // 获取当前按钮所在的行
            const row = this.closest('tr');

            // 从DOM中移除该行
            row.remove();
        });
    });

    var links = document.getElementsByClassName('nav-link'); // 获取所有的标签对象
// 循环遍历每一个链接
for (var i = 0; i < links.length; i++) {
    // 绑定鼠标悬停事件
    links[i].onmouseover = function () {
        this.style.backgroundColor = '#eee'; // this表示事件源对象
    };
    links[i].onmouseout = function () {
        if (!this.classList.contains('active')) {
            this.style.backgroundColor = ''; // 恢复默认背景颜色
        }
    };

    // 绑定点击事件
    links[i].onclick = function () {
        // 移除所有链接的激活样式
        for (var j = 0; j < links.length; j++) {
            links[j].classList.remove('active');
            links[j].style.backgroundColor = ''; // 确保移除激活样式后背景颜色恢复
        }
        // 添加当前链接的激活样式
        this.classList.add('active');
        this.style.backgroundColor = '#ccc'; // 设置激活时的背景颜色
    };
}
    const breakpersonal = document.querySelector('.break-personal');
    breakpersonal.addEventListener('click', function(event) {
        const confirmLogout = confirm('您确定要退出登录吗？');
        if (confirmLogout) {
            window.location.href = 'login.html';
        } else {
            event.preventDefault(); // 阻止默认行为
        }
    });

};